<template>
  <div class="layout page-config">
    <Row>
      <Col span="6"><Button type="primary" icon="md-add" @click="onConfigEdit('')">{{$t('page.app.configadd')}}</Button></Col>
      <Col span="8" offset="10"><Input v-model="filter" search :placeholder="$t('page.app.search')" /></Col>
    </Row>
    <Divider />
    <Row :gutter="16">
      <Col :sm="24" :md="12" :lg="8" :xl="6" v-for="d in depends" :key="d.name">
      <Card>
        <p>{{d.name}}</p>
        <p>
          <Row>
            <Col span="24" class="right">
            <ButtonGroup size="small">
              <Tooltip :transfer="true" :content="$t('page.app.config')">
                <Button icon="ios-construct-outline" @click="onConfigEdit(d.name)"></Button>
              </Tooltip>
            </ButtonGroup>
            </Col>
          </Row>
        </p>
      </Card>
      </Col>
    </Row>
    <ConfigAdd ref="configadd" @onRefresh="loadDepends"></ConfigAdd>
  </div>
</template>

<script>
  import ConfigAdd from './comp/configadd'
  export default {
    components: { ConfigAdd },
    data() {
      return {
        filter: '',
        depends: [],
      }
    },
    mounted() {
      this.loadDepends()
    },
    methods: {
      loadDepends() {
        this.$md.dispatch('app_config_depends').then(data => {
          if (data.retCode === 1) {
            let depends = data.data || []
            this.depends = depends
          }
        })
      },
      // =====================
      onConfigEdit(name) {
        this.$refs.configadd.show(name)
      },
    }
  };
</script>
